<template>
  <PanelLayout>
    <div class="two-cell">
      <div class="title">风场状态监控</div>
      <div class="list-wrap">
        <div class="head">
          <span class="col">风场位置</span>
          <span class="col">风场风速m/s</span>
        </div>
        <div class="marquee-view">
          <div class="marquee">
            <div class="row" v-for="(item, index) in list" :key="index">
              <div class="col">{{ item.title }}</div>
              <div class="col">{{ item.percentage }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </PanelLayout>
</template>

<script setup name="TwoCell">
import PanelLayout from '@/views/index/PanelLayout.vue'
import CountUpVue from '@/components/CountUpVue/index.vue'
import { randomLenNum } from '@/utils/index.js'
import { getNumZy, getFcData } from '@/api/base.js'

import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
const list = ref([])

const init = () => {
  const time = appStore.timePoint
  // 模拟接口获取数据
  // console.log('模拟接口获取数据', appStore.timePoint)

  getFcData({ time: time }).then(res => {
    if (res.code == '0000') {
      list.value = [...res.data, ...res.data]
    }
  })

  // list.value = Array.from({ length: 20 }, (e,i) => {
  //   return {
  //     title: '风电场'+i,
  //     percentage: Math.random()
  //   }
  // })
  // console.log(list.value);
}

init()

watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)
</script>

<style lang="scss" scoped>
@keyframes row {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}
.two-cell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  .title {
    font-size: 18px;
    height: 16px;
  }
  .list-wrap {
    width: 100%;
    flex: 1;
    position: relative;
    .head {
      background: rgba(255, 255, 255, 0.1);
      font-size: 14px;
      padding: 14px 34px;
      color: #68d8fe;
      display: flex;
      justify-content: space-between;
      line-height: 1.05;
    }
    .marquee-view {
      position: absolute;
      top: 43px;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      .marquee {
        animation: row 10s linear infinite;
        &:hover {
          animation-play-state: paused;
        }
        .row {
          line-height: 1.05;
          padding: 14px 34px;
          color: #61a8ff;
          font-size: 14px;
          position: relative;
          display: flex;
          justify-content: space-between;
          &:hover {
            color: #68d8ff;
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }
  }
}
</style>
